/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* model */
import { ChartServiceType } from '@model/param/out/Chart'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, ref, Ref, computed, watch } from 'vue'
import { CommonComponentInstance } from '@model/VC'
// API
import * as ReportApi from '@src/api/ReportApi'
import { onMounted } from 'vue';
interface ChartServiceTypeSelectSetupState {
  // 服务类型选择框变化事件
  handlerServiceTypeChange: (value: string[]) => void;
  // 服务类型列表
  serviceTypeData: Ref<ChartServiceType[]>;
}

enum ChartServiceTypeSelectEventEnum {
  Input = 'input'
}

export type ChartServiceTypeSelectProps = {
  // 团队值数组
  value: string[];
}
export type ChartServiceTypeSelectInstance = ComponentInstance & ChartServiceTypeSelectSetupState
export type ChartServiceTypeSelectVM = ComponentRenderProxy<ChartServiceTypeSelectProps> & CommonComponentInstance

export default defineComponent<ChartServiceTypeSelectProps, ChartServiceTypeSelectSetupState>({
  name: ComponentNameEnum.ChartServiceTypeSelect,
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  setup(props: ChartServiceTypeSelectProps, { emit }) {
    const serviceTypeData = ref([])
    
    /** 
     * @description 团队选择框变化事件
    */
    const handlerServiceTypeChange = (value: string[]) => {
      emit(ChartServiceTypeSelectEventEnum.Input, value)
    }

    const serviceTypeIds: Ref<string[]> = computed(() => {
      return props.value
    })

    // watch(serviceTypeIds,(n,o) => {
    //   fetchChartServiceType()
    // })

    /** 
     * @description 获取人员数据
    */
     const fetchChartServiceType: VoidFunction = async () => {
      const result = await ReportApi.getServiceTypeList()
      serviceTypeData.value = result?.data?.serviceTypeList || []
    }

    onMounted(() => {
      fetchChartServiceType()
    })
    
    return {
      serviceTypeData,
      handlerServiceTypeChange
    }
  },
  render() {
    return (
      <div>
        <el-select
          value={this.value}
          multiple
          clearable
          collapse-tags
          placeholder="请选择服务类型"
          onInput={this.handlerServiceTypeChange}
        >
          {
            this.serviceTypeData.map((type: ChartServiceType, index: number) => {
              return (
                <el-option
                  key={index}
                  label={type}
                  value={type}
                >
                </el-option>
              )
            })
          }
        </el-select>
      </div>
    )
  }
})
